<template>
	<view class="wrap">
		<!-- 顶部开始 -->
		<view class="top">
			<u-search shape="square" :showAction="false" v-model="keyword" @search='search'></u-search>
			<view class="nav">
				<text class="frist">综合推荐</text>
				<text>销量</text>
				<text class="price">价格
					<view>
						<u-icon name="arrow-up" color="#fff" size="15" class="up"></u-icon>
						<u-icon name="arrow-down" color="#fff" size="15" class="down"></u-icon>
					</view>
				</text>
				<text>好评度</text>
				<text>店铺</text>
			</view>

			<text class="classify">
				<u-icon name="list-dot" color="#fff" size="15" label='分类' labelColor='#fff'></u-icon>

			</text>

		</view>
		<!-- 顶部结束 -->
		<!-- 内容开始 -->
		<view class="contentBox">
			<view class=" content">
				<view class="content_list">
					<view v-for='(item,index) in onelist' :key="item.id" data-id='item.id' @click="goDetail(item.id)">

						<image :src="item.img" alt="">
							<view>
								<view class="title">{{item.goodsname}}</view>
								<view class="msg">敏感肌可用，控油祛痘、男女可用、男女可用</view>
								<view class="priceBox">
									<text class="price">￥{{item.price}}</text>
									<text class="marketPrice">￥{{item.market_price}}</text>
									<text>999人已付款</text>
								</view>

								<view class="limit">
									<text>11.11限时299元起</text>
								</view>

								<text>999条评论</text>
								<text>99.9%好评</text>
							</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容结束 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '遥看瀑布挂前川', //搜索关键词
				onelist: [], //一级导航列表
			}
		},
		onLoad(params) {
			// console.log(params);
			if (params.keyword) {
				this.search(params.keyword);
				this.keyword = params.keyword
			} else {
				this.getlist(params);
			}
		},
		methods: {
			getlist(params) {
				console.log(params);
				let {
					type,
					cateid
				} = params
				this.$http({
					url: '/getgoodlist',
					data: {
						cateid,
						type
					}
				}).then(res => {
					this.onelist = res.data.list.goodData;
					this.onelist.forEach(item => {
						item.img = this.$baseUrl + item.img
					})
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
			// 搜索
			async search(keywords) {
				console.log('搜索');
				let res = await this.$http({
					url: '/search',
					data: {
						keywords
					}
				})
				console.log(res);
				// 搜索成功
				if (res.data.code == 200) {
					this.onelist = res.data.list
					this.onelist.forEach(item => {
						item.img = this.$baseUrl + item.img
					})
				}
			}


		}
	}
</script>

<style lang="scss">
	/* 顶部开始 */
	.wrap {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f2f2f2;
		position: relative;
	}

	.wrap>.top {
		width: 100%;
		height: 150rpx;
		background: linear-gradient(#ff6040, #fc8a7f);
		box-shadow: 0rem 10rpx 10rpx #ffd7d0;
		position: relative;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.top .nav {
		width: 100%;
		display: flex;
		white-space: nowrap;
		overflow: auto;
		align-items: center;

	}

	.nav text {
		display: block;
		// width: 70rpx;
		// height: 70rpx;
	}

	.nav text {
		display: block;
		// width: 70rpx;
		// height: 70rpx;
		font-size: 26rpx;
		color: #fff3f2;
		/* margin-top: .32rem; */
		line-height: 90rpx;
		position: relative;

	}

	.nav text {
		height: 70rpx;
		margin-right: 40rpx;
		text-align: center;
	}

	.nav>.frist {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.nav .price {
		position: relative;
		margin-right: 70rpx;
	}

	.top .price>view {
		font-size: 16rpx;
		height: 76rpx;
		width: 15rpx;
		position: absolute;
		top: 18rpx;
		right: -30rpx;


	}

	.top .up {
		position: absolute;
		top: 18rpx;
		right: -40rpx;

	}

	.top .down {
		position: absolute;
		top: 38rpx;
		right: -40rpx;
	}

	.top .classify {
		display: flex;
		position: absolute;
		width: 130rpx;
		height: 70rpx;
		right: 0;
		bottom: 0rpx;
		background: linear-gradient(#ff7d6d, #ff8a80);
		box-shadow: -20rpx 16rpx 10rpx -20rpx #E63D2E;
		line-height: 70rpx;
		justify-content: center;
		align-items: center;

	}

	/* 内容开始 */
	.contentBox {
		width: 100%;
		height: 82vh;
		background-color: #fff;
		// padding-bottom: 120rpx;
		// height: 100rpx;
		flex-grow: 1;
		overflow: auto;
	}

	.contentBox .content_list {
		// width: 95%;
		// background-color: red;
	}

	.content_list>view {
		color: #ff6040;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.content image {
		width: 220rpx;
		height: 220rpx;

	}

	.content_list>view>view {
		margin-left: 20rpx;
	}

	.content .title {
		width: 425rpx;
		font-size: 30rpx;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 20rpx 0 10rpx;
		font-weight: border;
	}

	.content .msg {
		width: 425rpx;
		font-size: 26rpx;
		color: #999999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.content .priceBox {
		margin-top: -20rpx;
	}

	.content .price {
		display: inline-block;
		font-size: 30rpx;
		color: #ff6040;
		font-weight: bold;
		margin: 33rpx 0 11rpx;


	}


	.content strong {
		font-size: 14rpx;

	}

	.content .marketPrice {
		font-size: 16rpx;
		color: #999999;
		font-weight: bold;
		margin-right: 21rpx;
		text-decoration-line: line-through;
	}

	.content text {
		font-size: 18rpx;
		color: #a4a4a4;
	}

	.content .limit {
		// display: inline-block;
		// width: 200rpx;
		margin-bottom: 10rpx;

		text {
			padding: 9rpx 5rpx 6rpx 7rpx;
			background-color: #ff8066;
			font-size: 18rpx;
			color: #ffffff;
			box-sizing: border-box;

			border-radius: 3rpx;
		}
	}




	.content a>view {
		margin-left: 30rpx;
	}

	.content>view {
		margin-top: 50rpx;
	}

	.content>view>view {
		margin-bottom: 40rpx;
	}
</style>